<template>
    <div class="p-15 p-t-0">
        <div class="title-content">
            <el-row>
                <el-col :span="8"  class="text-left">
                    <span>订单日期</span>{{modelForm.createAt}}
                </el-col>
                <el-col :span="8"  class="text-left">
                    <span>供应商</span>{{modelForm.supplier.name}}
                </el-col>
                <el-col :span="8"  class="text-left">
                    <span>仓库</span>{{modelForm.warehouse.name}}
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="text-left">
                     <span>收货地址</span>{{modelForm.address?modelForm.address:'未填写收货地址'}}
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="text-left">
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;备注&nbsp;&nbsp;&nbsp;</span>{{modelForm.remark?modelForm.remark:'未填写备注'}}
                </el-col>
            </el-row>
        </div>
         <div class="functionButton text-left m-b-10 m-t-10">
                <el-button type="warning"  @click="printOrder"><i class="icon icon-dayin"></i> 打印</el-button>
                <el-button type="danger"   @click="goBack()"><i class="icon icon-fanhui1"></i> 取消</el-button>
            </div>
        <div class="order-content">
            <el-table
                    :data="tableData"
                    border
                    show-summary
                    :summary-method="getSummaries"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="code"
                        label="原料编码"
                        width="150">
                    <template scope="scope">
                        {{scope.row.code}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="原料名称"
                        width="250" >
                </el-table-column>
                <el-table-column
                        prop="goodsSpec"
                        label="规格型号"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="purchaseSpec"
                        label="采购规格"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="unitName"
                        label="采购单位"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="count"
                        label="采购数量"
                        width="100">
                    <template scope="scope">
                        {{scope.row.count}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="采购单价"
                        width="100">
                    <template scope="scope">
                        {{scope.row.price}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="historyPrice"
                        label="历史采购单价"
                        width="100">
                    <template scope="scope">
                        <span>{{scope.row.historyPrice | money}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="money"
                        label="采购金额"
                        width="100">
                    <template scope="scope">
                        {{scope.row.money}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="memo"
                        label="备注">
                    <template scope="scope">
                        {{scope.row.memo}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--打印模板-->
        <div class="print-con" ref="printData">
            <div class="order-title">{{orderInfo.printSet.detailtitle}}</div>

            <div class="order-info">
                <ul>
                    <li>单据号：{{orderInfo.no}}</li>
                    <li>仓&nbsp;&nbsp;&nbsp;库：{{orderInfo.warehouse}}</li>
                    <li>日&nbsp;&nbsp;&nbsp;期：{{(orderInfo.createAt)|dateShow(16)}}</li>
                    <li>供应商：{{orderInfo.supplier}}</li>
                    <li>制单人：{{orderInfo.purchaser}}</li>
                    <li>应付金额：{{orderInfo.amount|saveDoc}}元</li>
                </ul>
            </div>

            <table class="tb-con" cellpadding="1" cellspacing="1" border="1">
                <tr>
                    <td>&nbsp;</td>
                    <td>编码</td>
                    <td>名称</td>
                    <td>规格</td>
                    <td>单价(元)</td>
                    <td>数量</td>
                    <td>金额(元)</td>
                </tr>
                <tr v-for="(item, index) in orderInfo.goods" :key="item.id">
                    <td>{{index+1}}</td>
                    <td>{{item.no}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.specification}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.count}}</td>
                    <td>{{(item.price*item.count)|saveDoc}}</td>
                </tr>
            </table>

            <div class="order-info">
                <ul>
                    <!--<li>应付金额：{{orderInfo.amount|saveDoc}}元</li>-->
                    <!--<li>优惠金额：{{orderInfo.preferentialAmount|saveDoc}}元</li>
                    <li>实付金额：{{orderInfo.realPayment|saveDoc}}元</li>-->
                    <li class="sigle-line">地址：{{orderInfo.address}}</li>
                    <li class="sigle-line">备注：{{orderInfo.remark}}</li>
                </ul>
            </div>

            <div class="item-info" v-if="(orderInfo.printSet.detailorderExplain!='')">
                <ul>
                    <li v-html="orderInfo.printSet.detailorderExplain"></li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            modelForm:{},
            tableData:[{
                id:"",
                code: '',
                name: '',
                goodsSpec: '',
                purchaseSpec: '',
                unitName:'',
                count:'0',
                price:'0.00',
                historyPrice:'',
                money:'0.00',
                memo:'',
            }],
            /*打印单据样例数据*/
            orderInfo: {
                printSet: {
                    detailtitle:'采购订单',
                    detailorderExplain:"1、请收到物品后及时清点，如有短缺或者漏装，请及时联系我们。<br>"+
                    "2、货款未结清前，货物仍归我公司所有。<br>"+
                    "3、本公司所有售物品，无质量问题概不退货，如有疑问请及进反馈。",
                    dataSet:{}
                },
                id:'302',
                no:'XC2018070738945',
                supplier:'宏达乳业',
                warehouse:'西安一号仓库',
                founder:'张三',
                purchaser:'李四',
                createAt:'2018-06-10 16:30:00',
                amount:'270',
                preferentialAmount:'0',
                realPayment:'270',
                remark:'赠送地推产品3件',
                address:'陕西省西安市明光路33号',
                goods:[
                    {
                        no:"90001",
                        name:"清香柚子茶饮",
                        specification:"500ml/瓶",
                        price:0,
                        count:0,
                    }
                ]
            }
        }
    },
    created(){
        window.this=this;
        this.initData();
    },
    methods:{
        initData(){
            var id=this.$route.query.id;
            this.modelForm.id=id;
            this.$axios.get("purchaseOrders/create?id="+id).then((data)=>{
                if(data.status==200){
                    let json = data.content;
                    let order = json.purchaseOrder;
                    let orderDetail = json.purchaseOrderDetails;

                    this.orderInfo.id = order.id;
                    this.orderInfo.no = order.no;
                    this.orderInfo.supplier = order.supplier.name;
                    this.orderInfo.warehouse = order.warehouse.name;
                    this.orderInfo.purchaser = order.purchaser;
                    this.orderInfo.createAt = order.createAt;
                    this.orderInfo.amount = order.amount;
                    this.orderInfo.remark = order.remark;
                    this.orderInfo.address = order.address;

                    if(orderDetail && orderDetail.length>0){
                        this.orderInfo.goods.splice(0,this.orderInfo.goods.length);
                        let good = null;
                        for(let i=0;i<orderDetail.length;i++){
                            good = orderDetail[i];
                            this.orderInfo.goods.push(
                                {
                                    no: good.code,
                                    name: good.name,
                                    specification: good.purchaseUnit,
                                    price: good.realPrice,
                                    count: good.realCount
                                }
                            );
                        }
                    }
                    //初始化单据到表单
                    this.modelForm = json.purchaseOrder;
                    this.suppliers = json.supplier;
                    this.warehouses = json.warehouse;
                    this.material=json.material;
                    this.modelTreeTable=json.treeData;
                    this.modelForm.createAt=json.date;
                    this.tableData=json.purchaseOrderDetails;
                    this.modelForm.supplier=json.purchaseOrder.supplier;
                    this.modelForm.warehouse=json.purchaseOrder.warehouse;
                    this.modelForm.address=json.purchaseOrder.address;
                    this.modelForm.remark=json.purchaseOrder.remark;
                    for(var i=0;i<this.tableData.length;i++){
                        this.tableData[i].price=(this.tableData[i].price*1).toFixed(2);
                        this.tableData[i].money=(this.tableData[i].money*1).toFixed(2);
                    }
                }else{
                    this.$message.error(data.body.message);
                }
            })
        },
         getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计';
                    return;
                }
                if(index==7 || index==10){
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                if(index==7){
                                    return prev + curr;
                                }else{
                                    return ((prev*1 + curr*1)*1).toFixed(2);
                                }
                            } else {
                                if(index==7){
                                    return prev;
                                }else{
                                    return (prev*1).toFixed(2);
                                }
                                
                            }
                        }, 0);
                    } else {
                        sums[index] = '数据异常';
                    }
                }
            });

            return sums;
        },
        //打印相关方法
        /* 打印单据 */
        printOrder(){
            // 打印预览
            var $this=this;
            setTimeout(function(){
                $this.Print($this.$refs.printData);
            }, 200);
        },
        goBack() {
            this.router.go(-1);
        }
    }
}
</script>
<style scoped>
    .title-content{
        background-color: #efefef;
        padding: 10px;
        line-height: 40px;
        color: #606266;
    }
    .title-content span{
        padding-right:15px;
        color: #99a9bf;
    }
    .order-content{
        margin-top:10px;
    }
    .print-con{zoom:60%; width:98%; color:#333333; font-size:12px !important; background-color: #ffffff; padding:0 10px; position: absolute; left: 0; top:0; z-index: -10;}

    /*单据-标题*/
    .print-con .order-title{zoom:var(--zoomsize); font-size: 12px; font-weight: bold; text-align: center; padding: 5px; border-bottom: 2px solid #333333; }

    /*单据-说明信息*/
    .print-con .order-info{padding:0; font-size: 10px !important; height: auto; overflow: hidden;}
    .print-con .order-info ul{height:auto; overflow: hidden; margin:0; padding:0; }
    .print-con .order-info ul li{list-style: none; font-size:12px;}
    .print-con .order-info ul li{zoom:var(--zoomsize); float:left; width:33%; height:var(--line-height-set); line-height: var(--line-height-set); overflow: hidden;}
    .print-con .order-info ul li.sigle-line{zoom:var(--zoomsize); width:100%; display: block;}

    /*单据-商品列表*/
    .print-con .tb-con{widht:100%; background-color: #b4b4b4; border: 1px solid #b4b4b4;}
    .print-con .tb-con th{zoom:var(--zoomsize); height:var(--line-height-set); line-height: var(--line-height-set); background-color: #ffffff; border: 1px solid #b4b4b4; font-size: 12px;}
    .print-con .tb-con td{zoom:var(--zoomsize); height:var(--line-height-set); line-height: var(--line-height-set); text-align: center; background-color: #ffffff; /*border: 1px solid #b4b4b4;*/ font-size: 12px;}

    /*责任条款*/
    .print-con .item-info{}
    .print-con .item-info ul{margin:0; padding:0; list-style: none;}
    .print-con .item-info ul li{zoom:var(--zoomsize); height:var(--line-height-set); line-height: var(--line-height-set); font-size: 12px;}
</style>